<template>
  <MyCard title="实时游客统计">
    <div class="top-wrap">
      <p class="right">
        可预约总量
        <span>999999</span>
        人
      </p>
    </div>

    <div class="number">
      <span v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>

    <div class="charts" ref="charts"></div>
  </MyCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill';
const people = ref('215908人');
const charts = ref();
onMounted(() => {
  // 获取echarts类的实例
  const myCharts = echarts.init(charts.value);
  // 设置实例的配置项
  myCharts.setOption({
    //标题组件
    // title: {
    //   text: '水球图',
    // },
    // X轴组件
    xAxis: {
      show: false,
    },
    // Y轴组件
    yAxis: {
      show: false,
    },
    // 系列：决定你战士什么样的图形图标
    series: {
      type: 'liquidFill',
      data: [0.6, 0.4, 0.2],
      color: ['#27BDBA', '#2DDDBA', '#9DF0EF'],
      radius: '80%',
      waveAnimation: true, //动画
      animationDuration: 3,
      animationDurationUpdate: 0,
      outline: {
        show: true,
        borderDistance: 8,
        itemStyle: {
          color: 'none',
          borderColor: '#294D99',
          borderWidth: 8,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.25)',
        },
      },
    },
    // 布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  });
});
</script>

<style lang="scss" scoped>
.top-wrap {
  position: relative;

  .right {
    font-size: 15px;
    color: white;
    position: absolute;
    top: 0px;
    right: 20px;
    span {
      color: #ff8100;
    }
  }
}

.number {
  margin: 30px 20px 0;
  display: flex;
  justify-content: space-between;

  span {
    background: url('../../images/total.png') no-repeat;
    background-size: 100% 100%;
    width: 40px;
    height: 40px;
    color: aqua;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.charts {
  flex: auto;
}
</style>
